<template>
  <el-container>
    <el-main class="menu-wrapper">
      <el-form ref="addPromotion" :model="addPromotion" :rules="rules" label-width="90px">
        <el-form-item label="活动商品" prop="productName" style="width:520px;">

          <product-choose  @chooseProduct="chooseProduct"></product-choose>
        </el-form-item>
        <el-form-item label="活动描述" prop="title" style="width:520px;">
          <el-input v-model="addPromotion.title" placeholder="如消费满100元生效"></el-input>
        </el-form-item>
        <el-form-item label="起止日期" prop="dateTime" style="width:520px">
          <el-date-picker v-model="addPromotion.dateTime" style="width:100%" type="datetimerange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="赠品类型"  prop="giftType" style="width:250px;">
          <el-select style="width: 100%;" v-model="addPromotion.giftType" placeholder="请选择" @change="giftChoose">
            <el-option v-for="item in giftTypeForm" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width:520px;" label="优惠券名称" v-if="addPromotion.giftType == 1">
          <el-select style="display: inline-block;width: 100%;" v-model="addPromotion.gifts[0].giftName" value-key="id" placeholder="请选择优惠券" @change="couponClick">
            <el-option v-for="(item,index) in couponForm" :key="item.id" :label="item.name" :value="item" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width:250px;" :label="addPromotion.giftType == 1?'优惠券数量':addPromotion.giftType == 3?'购物券数量':'兑换券数量'">
          <el-input v-model="addPromotion.gifts[0].quantity" placeholder="请输入赠品数量"></el-input>
        </el-form-item>
        <div style="display: flex">
          <el-form-item label="活动库存" prop="stock" style="width:250px">
            <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent
              v-model="addPromotion.stock" placeholder="请输入库存"></el-input>
          </el-form-item>
          <div style="display: flex;align-items: center;flex: 1;margin-bottom: 20px;margin-left: 20px;">
            <el-checkbox v-model="addPromotion.firsted">只适用于首单生效</el-checkbox>
          </div>
        </div>
        <div>
          <el-form-item label="参与会员" style="width: 520px">
            <el-select style="width: 100%;" v-model="vipsvalue" multiple filterable allow-create default-first-optionplaceholder="请选择可参与会员"
              @change="vipschanges">
              <el-option v-for="item in vipslist" :key="item.id" :label="item.name" :value="item.vip"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="参与城市" style="width: 520px">
            <queryCascader style="width: 100%;" @queryCascaderclick="queryCascaderclick"></queryCascader>
          </el-form-item>
        </div>

        <el-form-item>
          <el-col :span="12">
            <el-button type="primary" :loading="clicked" @click="savePromotion('addPromotion')">确 定</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
  import queryCascader from '@/components/Query/queryCascader'
  import coupon from '@/views/promotion/components/coupon'
  import {
    list as productList
  } from '@/api/product'
  import {
    save
  } from '@/api/promotion'
  import {
    EventBus
  } from '@/api/eventBus'
  import {
    list
  } from '@/api/vip'
  import { list as couponList } from '@/api/coupon'
  import productChoose from "../components/product.vue"
  export default {
    name: 'buyzeng-add',
    data() {
      return {
        vipslist: [], //获取vip列表
        vipsvalue: [],
        goods: '',
        clicked: false,
        rules: {
          type: [{
            required: true,
            message: '请输入选择类型',
            trigger: 'change'
          }, ],
          agioRate: [{
            required: true,
            message: '请输入满减比例',
            trigger: 'blur'
          }, ],
          amount: [{
            required: true,
            message: '请输入金额',
            trigger: 'blur'
          }, ],
          giftType: [{
            required: true,
            message: '请选择类型',
            trigger: 'blur'
          }, ],
          minimumPrice: [{
            required: true,
            message: '请输入数量',
            trigger: 'blur'
          }, ],
          stock: [{
            required: true,
            message: '请输入库存',
            trigger: 'blur'
          }, ],
          productName: [{
            required: true,
            message: '请选择活动商品',
            trigger: 'change'
          }, ],
          dateTime: [{
            required: true,
            message: '请选择活动时间',
            trigger: 'change'
          }, ],
          integer: [{
            required: true,
            message: '请输入优先级',
            trigger: 'blur'
          }, ],
          introduction: [{
            required: true,
            message: '请输入促销说明',
            trigger: 'blur'
          }, ],
          giftName: [{
            required: true,
            message: '请选择优惠券',
            trigger: 'blur'
          }],
        },
        productOptions: [],
        addPromotion: {
          dateTime: [],
          productName: '',
          givenAmount: 0,
          agioRate: 0,
          amount: 0,
          createDate: '',
          stock: '',
          firsted: false,
          giftType: '1',
          gifts: [{
            giftId:'',
            giftName:'',
            quantity:'',
            availableQuantity:0,
          }],
          introduction: '',
          minimumPrice: 0,
          goodsId: '',
          modifyDate: '',
          orders: 0,
          overlying: false,
          thumbnail: '',
          title: '',
          type: 11,
          vips: "",
          areaList: ""
        },
        giftTypeForm:[{
          value: '1',
          label: '优惠券'
        }, {
          value: '2',
          label: '兑换券'
        }, {
          value: '3',
          label: '购物券'
        }],
        couponForm:[]
      }
    },
    components: {
      coupon,
      queryCascader,
      productChoose
    },
    methods: {
      queryCascaderclick(data) {
        this.addPromotion.areaList = data
      },
      vipschanges(val) {
        this.addPromotion.vips = ''
        val.forEach(item => {
          this.addPromotion.vips += item
        })

      },
      loadVip() {
        list().then(res => {
          console.log(res);
          this.vipslist = res.data.data
        })
      },
      addCoupon() {
        this.$refs.couponAdd.add()
      },
      change(e) {
        this.addPromotion.goodsId = e.goodsId;
      },
      getProductList(query) { // 加载商品
        productList({
          keyword: query,
          pageSize: 20,
          isList: true
        }).then(res => {
          this.$set(this.$data, 'productOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      chooseProduct(data){
            console.log('1121212')
            this.addPromotion.goodsId = data.goodsId;
            this.addPromotion.productName = data.name;
            console.log(this.addPromotion)
      },
      changeProduct(data) {
        this.addPromotion.goodsId = data.goodsId
        this.addPromotion.productName = data.name
      },
      savePromotion(addPromotion) {
        if (this.addPromotion.giftType=="1") {
          if(!this.addPromotion.gifts[0].giftId){
            this.$message.error('请选择优惠券');
            return
          }
        }
        if(!this.addPromotion.gifts[0].quantity){
          this.$message.error('请输入赠送数量');
          return
        }
        if (this.addPromotion.type === '') {
          this.clicked = false
        }
        this.$refs[addPromotion].validate((valid) => {
          if (valid) {
            this.clicked = true
            var addPromotion = {
              agioRate: this.addPromotion.agioRate,
              amount: this.addPromotion.amount,
              createDate: new Date(),
              firsted: this.addPromotion.firsted,
              giftType: this.addPromotion.giftType,
              gifts: this.addPromotion.gifts,
              stock: this.addPromotion.stock,
              introduction: this.addPromotion.introduction,
              minimumPrice: this.addPromotion.minimumPrice,
              modifyDate: new Date(),
              beginDate: '',
              endDate: '',
              status: 0,
              goodsId: this.addPromotion.goodsId,
              orders: this.addPromotion.orders,
              overlying: this.addPromotion.overlying,
              thumbnail: this.addPromotion.thumbnail,
              title: this.addPromotion.title,
              type: this.addPromotion.type,
              vips: this.addPromotion.vips,
              areaList: this.addPromotion.areaList
            }
            if (this.addPromotion.dateTime.length > 0) {
              addPromotion.beginDate = this.addPromotion.dateTime[0];
              addPromotion.endDate = this.addPromotion.dateTime[1]
            }
            save(addPromotion).then(response => {
              this.$store.dispatch('tagsView/delView', this.$route).then(({
                visitedViews
              }) => {
                this.$router.push({
                  path: '/buyzeng/list'
                })
              })
              EventBus.$emit('buyzeng-add', response.data)
              this.clicked = false
            }).catch(error => {
              this.clicked = false;
              console.log('error')
            })
          } else {
            this.clicked = false;
          }
        })
      },
      // 优惠券
      couponList(){
        var _this = this
        couponList().then(response =>{
          _this.couponForm = response.data.data
        })
      },
      //优惠券选择
      couponClick(data){
        console.log(data)
        this.addPromotion.gifts[0].giftId = data.id
        this.addPromotion.gifts[0].giftName = data.name
      },
      // 赠品选择
      giftChoose(data){
        if(data == 3){
          this.addPromotion.giftType = "3"
          this.addPromotion.gifts[0].giftId = '3'
          this.addPromotion.gifts[0].giftName = '送购物券'
          this.addPromotion.gifts[0].quantity = 0
        }else if(data == 2){
          this.addPromotion.giftType = "2"
          this.addPromotion.gifts[0].giftId = '0'
          this.addPromotion.gifts[0].giftName = '兑换券'
          this.addPromotion.gifts[0].quantity = 0
        }else{
          this.addPromotion.giftType = "1"
          this.addPromotion.gifts[0].giftId = ''
          this.addPromotion.gifts[0].giftName = ''
          this.addPromotion.gifts[0].quantity = 0
        }
      }
    },
    created() {
      this.loadVip()
      this.getProductList()
      this.couponList()
    },
    filters: {

    }
  }
</script>

<style scoped>
 .el-form-item{
   margin-bottom: 20px;
 }
</style>
